<template>
  <div class="header-children-menu">
    <div class="text">商城管理</div>
    <d-menu mode="vertical" :default-select-keys="['item1']" class="menu" >
      <d-menu-item key="item1">
        <template #icon>
          <i class="icon-homepage"></i>
        </template>
        <span>Home</span>
      </d-menu-item>
      <d-sub-menu title="System" key="system">
        <template #icon>
          <i class="icon-system"></i>
        </template>
        <d-menu-item key="system-item">
          <span>System item</span>
        </d-menu-item>
        <d-sub-menu title="Setting" key="setting">
          <template #icon>
            <i class="icon-setting"></i>
          </template>
          <d-menu-item key="setting-item">
            <span>Setting item</span>
          </d-menu-item>
        </d-sub-menu>
      </d-sub-menu>
    </d-menu>

  </div>

</template>

<script lang="ts" setup>
import {ref} from 'vue';


</script>

<style lang="scss">
.header-children-menu {
  min-width: 200px;
  height: 100%;
  box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-shadow, rgba(37, 43, 58, .24));
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  flex-direction: column;
  .text{
    text-align: center;
    line-height: 50px;
    font-weight: 600;
    color: var(--devui-text, #252b3a);
    font-size: 18px;
  }
  .menu{
    flex: auto;

     background: var(--devui-base-bg, #ffffff) !important;

  }
  .devui-menu-vertical{
    border-right: 0px;
    padding: 4px;
    ul.devui-submenu .devui-menu-item{
       background: var(--devui-base-bg, #ffffff) ;

     }
    .devui-menu-item-select{
      background: #E9FBFF !important;
      border-radius: 20px;
    }
  }
  .devui-menu-vertical .devui-menu-item-select:after{
    width: 0px;
  }
}

</style>
